<template lang="">
  <div>
    <el-date-picker
      v-model="dates"
      type="datetimerange"
      :shortcuts="shortcuts"
      range-separator="-"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      @change="datetimeChange"
    />
  </div>
</template>
<script>
export default {
  props: {
    startTime: {
      type: String,
      default: "",
    },
    endTime: {
      type: String,
      default: "",
    },
    modelValue: {
      type: Array,
      required: false,
    },
  },
  data() {
    return {
      dates: [],
      shortcuts: [
        {
          text: "最近一小时",
          value: () => this.buildDate(3600 * 1000),
        },
        {
          text: "最近一天",
          value: () => this.buildDate(3600 * 1000 * 24),
        },
        {
          text: "最近一周",
          value: () => this.buildDate(3600 * 1000 * 24 * 7),
        },
        {
          text: "最近一月",
          value: () => this.buildDate(3600 * 1000 * 24 * 30),
        },
        {
          text: "最近三月",
          value: () => this.buildDate(3600 * 1000 * 24 * 90),
        },
        {
          text: "最近一年",
          value: () => this.buildDate(3600 * 1000 * 24 * 365),
        },
      ],
    };
  },
  methods: {
    datetimeChange(value) {
      this.$emit(
        "update:startTime",
        this.$dayjs(value[0]).format("YYYY-MM-DD HH:mm:ss")
      );
      this.$emit(
        "update:endTime",
        this.$dayjs(value[1]).format("YYYY-MM-DD HH:mm:ss")
      );
    },
    buildDate(ms) {
      return [this.$dayjs().subtract(ms), this.$dayjs()];
    },
  },
};
</script>
<style lang=""></style>
